import React, { Component } from 'react'
import RouterViews          from '../../router/router.view'

import { Layout, Menu, Breadcrumb } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import './index.css'
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;


export default class Home extends Component {

    state = {
        nav:[
            {
                title:'积分获取',
                icon:UserOutlined,
                key:'sub1',
                sub:[
                    {
                        name:'活动积分',
                        path:'/home/getintegral/active',
                        key:'1'
                    },
                    {
                        name:'促销积分',
                        path:'/home/getintegral/sale',
                        key:'2'
                    }
                ]
            },
            {
                title:'积分消费',
                icon:LaptopOutlined,
                key:'sub2',
                sub:[
                    {
                        name:'品类管理',
                        path:'/home/payintegral/class',
                        key:'3'
                    },
                    {
                        name:'商城管理',
                        path:'/home/payintegral/store',
                        key:'4'
                    },
                    {
                        name:'商品管理',
                        path:'/home/payintegral/shop',
                        key:'5'
                    },
                    {
                        name:'订单管理',
                        path:'/home/payintegral/order',
                        key:'6'
                    }
                ]
            },
            {
                title:'积分数据',
                icon:NotificationOutlined,
                key:'sub3',
                sub:[
                    {
                        name:'积分获取',
                        path:'/home/dataintegral/get',
                        key:'7'
                    },
                    {
                        name:'积分变更',
                        path:'/home/dataintegral/change',
                        key:'8'
                    },
                    {
                        name:'积分平衡',
                        path:'/home/dataintegral/balance',
                        key:'9'
                    },
                    {
                        name:'会员积分明细',
                        path:'/home/dataintegral/vip',
                        key:'10'
                    }
                ]
            }  
        ],
        Breadcrumbs:['工作台']
    }
    // 点击退出
    loginOut = () =>{
        localStorage.clear()
        this.props.history.push('/login')
    }
    // 点击导航
    navClick = (Breadcrumb,path)=>{
        this.setState({Breadcrumbs:[...Breadcrumb]})
        this.props.history.push(path)
    }

    render(){
        const {nav,Breadcrumbs} = this.state
        return <div className="home">
            <Layout style={{height:'100vh'}}>
                {/* 头部 */}
                <Header className="header">
                    <span className="work" onClick={()=>this.navClick(['工作台'],'/home/work')}>工作台</span>
                    <span>会员积分后台管理</span>
                    <span className="login_out" onClick={this.loginOut}>{localStorage.user}  |  退出</span>
                </Header>

                <Layout>
                    {/* 导航 */}
                <Sider width={200} className="site-layout-background">
                    <Menu
                    mode="inline"
                   
                    style={{ height: '100%', borderRight: 0 }}
                    >
                    {
                        nav.map(item=><SubMenu key={item.key} icon={<item.icon />} title={item.title}>
                           {
                                item.sub.map(jtem=><Menu.Item key={jtem.key} onClick={()=>this.navClick([item.title,jtem.name],jtem.path)}>{jtem.name}</Menu.Item>)
                           } 
                        </SubMenu>)
                    }
                    </Menu>
                </Sider>

                    {/* 右侧区域 */}
                <Layout style={{ padding: '0 24px 24px' }}>

                    {/* 面包屑导航 */}
                    <Breadcrumb style={{ margin: '16px 0' }}>
                        {
                            Breadcrumbs.map((item,key)=> <Breadcrumb.Item key={key}>{item}</Breadcrumb.Item>)
                        }
                    </Breadcrumb>

                    {/* 内容区 */}
                    <Content className="site-layout-background" style={{ padding: 24, margin: 0,minHeight: 280,}}>
                        <RouterViews routers={this.props.routers}/>
                    </Content>

                </Layout>
                </Layout>
            </Layout>
        </div>
            
    }
}




